import React, { Component, useState } from 'react';
import { connect } from 'react-redux';
import { Table, Badge, Menu, Dropdown, Button, Modal } from 'antd';
import { DownOutlined } from '@ant-design/icons';

import action from "../../../store/action";



class index extends React.Component {
    constructor() {
        super();
        this.state = {
            data: [],
            newArray: '',
            visible: false,
            new_list: []
        }
    }
    componentWillMount() {
        this.handel_get()
    }
    render() {


        const handleOk = e => {
  
            this.setState({
                visible: false,
            });
        };

        const handleCancel = e => {
 
            this.setState({
                visible: false,
            });
        };

        const expandedRowRender = () => {
            const columns = [
                {
                    title: '序列号',
                    dataIndex: 'json_value_code',
                    key: 'json_value_code'
                },
                {
                    title: '材料名',
                    dataIndex: 'material_name',
                    key: 'material_name'
                },
                {
                    title: '录入单位',
                    dataIndex: 'commpanyName',
                    key: 'commpanyName',
                    render: (text) => <a>{text}</a>
                },
                {
                    title: '录入人员',
                    dataIndex: 'dataEntryClerkName',
                    key: 'dataEntryClerkName'
                },
               
            ];


            return <Table columns={columns} dataSource={this.props.data_childArr} pagination={false} rowKey={(record, index) => record.json_value_code} size="small"/>;
        };

        const columns = [
            {
                title: '导入用户',
                dataIndex: 'user_lname',
                key: 'user_lname'
            },
            {
                title: '导入时间',
                dataIndex: 'import_time',
                key: 'import_time'
            },
            {
                title: '导出人员名',
                dataIndex: 'nameOfSubmitter',
                key: 'nameOfSubmitter'
            },
            {
                title: '导出单位名',
                dataIndex: 'inCompany',
                key: 'inCompany'
            },
            {
                title: '联系方式',
                dataIndex: 'contact',
                key: 'contact'
            },
            {
                title: '通讯地址',
                dataIndex: 'address',
                key: 'address'
            },
            {
                title: '产生时间',
                dataIndex: 'produceDate',
                key: 'produceDate'
            },
            {
                title: '导出时间',
                dataIndex: 'exportData',
                key: 'exportData'
            },
            {
                title: '数据来源',
                dataIndex: 'dataSource',
                key: 'dataSource',
                render: text => <a>{text}</a>,
            },

            {
                title: '操作', key: 'operation', render: (text, record) => <Button type="link" onClick={() => this.showModal(text)}>
                    查看
           </Button>
            },
        ];
        let new_colmuns = JSON.parse(JSON.stringify(columns));

        return <div>
            <Table
                className="components-table-demo-nested"
                columns={columns}
                expandable={{ expandedRowRender }}
                dataSource={this.props.dataImport_arr}
                rowKey={(record, index) => record.id}
                onExpand={(record, index) => { this.handelExpanded(index.id, record) }}
                expandedRowKeys={this.state.newArray}
                onExpandedRowsChange={(item) => this.handel_Change(item)}
            />
            <Modal
                title="摘要数据"
                visible={this.state.visible}
                onOk={handleOk}
                onCancel={handleCancel}
                cancelText='取消'
                okText='确认'
            >
                <div className='DataImport_div'>
                    {
                        new_colmuns.splice(0, 2),
                        new_colmuns.pop(),
                        new_colmuns.map((item, index) => {

                            return <div key={index}>
                                <span>{item.title}:</span>
                                {
                                    this.state.new_list[index] == this.state.new_list.length - 1 ? (
                                        this.state.new_list[index].map((item,index)=>{
                                        return <a>{item}</a>
                                        })
                                    ):(
                                        <a>{this.state.new_list[index]}</a>
                                    )
                                    }
                            </div>
                        })
                    }
                </div>
            </Modal>
        </div>

    }
    showModal = (e) => {
        this.$axios.get(`/manager/api/getJsonValueRecordExportInputInfo/${e.id}`).then((res) => {
            let arr = Object.values(res.exportInputInfo);
            arr.shift()
            this.setState({
                new_list: arr
            })
        }).catch((err) => {
            console.log(err);
        })
        this.setState({
            visible: true,
        })
    };
    handel_get = () => {
        this.$axios.get('/manager/api/pageGetimportMaterialsDataRecordList2/0/9999').then((res) => {
            const { dataImport } = this.props;
            let new_list = {};
            [].push.apply(new_list, res.importJsonValueRecordAckItemList)
            dataImport(new_list);
        }).catch((err) => {
            console.log(err);
        });

    }
    handel_Change = (val) => {
        if (val.length > 1) {
            val.splice(0, 1)
            this.setState({
                newArray: val
            })
        } else {
            this.setState({
                newArray: ''
            })
        }
    }
    handelExpanded = async (record, state) => {

        if (state === true) this.$axios.get(`/manager/api/pageGetSingleImportDetail/0/999/${record}`).then((res) => {
            const { data_child } = this.props;
            let list = {};
            [].push.apply(list, res.userImportsMaterialInformationByEachList)
            data_child(list)
        }).catch((err) => {
            console.log(err);
        })


    }
}


export default connect(state => ({ ...state.custom }), action.custom)(index);